import { LocationFilled } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
import {defineComponent, ref} from 'vue';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import Item from "./item";
import ysmz from "@/assets/images/ysmz.png"
import zywz from "@/assets/images/zywz.png"
import { Steps } from '~/src/components/Steps';
import { KEEP_VIDEO_TOP } from '~/src/config';
import Pagination from "@/components/Pagination";
import zwsj from "@/assets/images/zwsj.png";
import BreadCrumb from "@/components/BreadCrumb";

// 引入Item信息类型定义
interface ItemInfo {
    KS_ID: string;
    KS_MC: string;
    image: string;
    to: string;
    HZ_MC?: string;
}
export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        // 分页组件返回当页数据
        const area = ref<ItemInfo[]>([])
        const handlePageChange = (Datas:any) => {
            area.value = Datas;
        };
        // 定义Item数据列表
        const items = [
            {
                HZ_MC:"外壳类门诊",
                KS_HZ:'200',
                KS_ID: '200',
                KS_MC: '外壳类门诊',
                PYM:"WKLMZ",
                ROWNUM_:1,
                image: ysmz,
            },
            {
                HZ_MC:"中医类门诊",
                KS_HZ:'201',
                KS_ID: '201',
                KS_MC: '中医类门诊',
                PYM:"ZYLMZ",
                ROWNUM_:2,
                image: zywz,
            },
            {
                HZ_MC:"西医类门诊",
                KS_HZ:'202',
                KS_ID: '202',
                KS_MC: '西医类门诊',
                PYM:"XYLMZ",
                ROWNUM_:3,
                image: zywz,
            },
            {
                HZ_MC:"其他门诊",
                KS_HZ:'203',
                KS_ID: '203',
                KS_MC: '其他门诊',
                PYM:"QTMMZ",
                ROWNUM_:4,
                image: zywz,
            },
            {
                HZ_MC:"骨科门诊",
                KS_HZ:'204',
                KS_ID: '204',
                KS_MC: '骨科门诊',
                PYM:"GKLMZ",
                ROWNUM_:5,
                image: zywz,
            },
            {
                HZ_MC:"皮肤科门诊",
                KS_HZ:'205',
                KS_ID: '205',
                KS_MC: '皮肤科门诊',
                PYM:"PTKMZ",
                ROWNUM_:6,
                image: zywz,
            },
            {
                HZ_MC:"眼科门诊",
                KS_HZ:'206',
                KS_ID: '206',
                KS_MC: '眼科门诊',
                PYM:"YKLMZ",
                ROWNUM_:7,
                image: zywz,
            },
            {
                HZ_MC:"耳鼻喉科门诊",
                KS_HZ:'207',
                KS_ID: '207',
                KS_MC: '耳鼻喉科门诊',
                PYM:"HRBNKMZ",
                ROWNUM_:8,
                image: zywz,
            },
            {
                HZ_MC:"肿瘤科门诊",
                KS_HZ:'208',
                KS_ID: '208',
                KS_MC: '肿瘤科门诊',
                PYM:"ZDKMZ",
                ROWNUM_:9,
                image: zywz,
            },
            {
                HZ_MC:"内科门诊",
                KS_HZ:'209',
                KS_ID: '209',
                KS_MC: '内科门诊',
                PYM:"NKLMZ",
                ROWNUM_:10,
                image: zywz,
            },
            {
                HZ_MC:"外科门诊",
                KS_HZ:'210',
                KS_ID: '210',
                KS_MC: '外科门诊',
                PYM:"WKMZ",
                ROWNUM_:11,
                image: zywz,
            },
            {
                HZ_MC:"妇产科门诊",
                KS_HZ:'211',
                KS_ID: '211',
                KS_MC: '妇产科门诊',
                PYM:"FCKMZ",
                ROWNUM_:12,
                image: zywz,
            },
            {
                HZ_MC:"儿科门诊",
                KS_HZ:'212',
                KS_ID: '212',
                KS_MC: '儿科门诊',
                PYM:"ERKMZ",
                ROWNUM_:13,
                image: zywz,
            },





        ];

        return () => (<>

            <UserInfo></UserInfo>
            <Steps></Steps>
            <div class={Style.container_mar}>
                <div class={Style.title}>
                    <div>

                        <BreadCrumb />
                    </div>
                </div>

                <div class={Style.container}>
                    {
                        area.value.map(item => (
                            <Item
                                key={item.KS_ID}
                                class={Style.item2}
                                image={item.image}
                                to={"/selectDepartment"}
                                itemInfo={item}  // 传递完整的item信息
                            >
                                {item.KS_MC}
                            </Item>
                        ))

                    }
                </div>
                <Pagination
                    style={{  padding: "0 64px" ,marginBottom:"10px",}}
                    pageSize={6}
                    Data={items}
                    onPageChange={handlePageChange}
                ></Pagination>
            </div>

        </>);
    }
})

